<template>
  <view class="container">
    <view class="content" v-if="edit">
      <view style="height: 20rpx"></view>
      <div class="card">
        <div style="height: 10px;"></div>
        <div style="font-size: 18px;font-weight: bold;margin-left: 5%;">基础信息</div>
        <div style="height: 10px;"></div>
        <u-line></u-line>
        <div class="cards">
          <div style="height: 15rpx"></div>
          <div class="flex">
            <div>单位名称</div>
            <div>{{ obj.farmName||'-' }}</div>
          </div>
          <div style="height: 10px"></div>
          <div class="flex">
            <div>联系人</div>
            <div>{{ obj.contactName||'-' }}</div>
          </div>
          <div style="height: 10px"></div>
          <div class="flex">
            <div>联系人电话</div>
            <div>{{ obj.contactPhone||'-' }}</div>
          </div>
          <div style="height: 20px"></div>
        </div>
      </div>
      <view v-for="(item, index) in list" style="margin-top: 10px;" :key="index">
        <div class="card">
          <div style="height: 10px;"></div>
          <div style="font-size: 18px;font-weight: bold;margin-left: 5%;">{{ item.source }}</div>
          <div style="height: 10px;"></div>
          <u-line></u-line>
          <div class="cards">
            <div style="height: 15rpx"></div>
            <div class="flex">
              <div>产生源数量</div>
              <div>
                <text>{{ item.sourceQuantity }}</text>
                <text>{{ item.sourceUnit }}</text>
              </div>
            </div>
            <div style="height: 10px"></div>
            <div class="flex">
              <div>更新周期（天）</div>
              <div>{{ item.updatePeriod }}</div>
            </div>
            <div style="height: 10px"></div>
            <div class="flex">
              <div>更新间隔（天）</div>
              <div>{{ item.periodInterval }}</div>
            </div>
            <div style="height: 10px"></div>
            <div class="flex">
              <div>周期起始</div>
              <div>{{ item.periodBegin }}</div>
            </div>
            <div v-for="(items, index) in item.organicList" :key="index" style="margin-top: 10px;">
              <div class="flex">
                <div>有机质</div>
                <div>{{ items.organicType }}</div>
              </div>
            </div>

            <div style="height: 10px"></div>

          </div>
        </div>
      </view>
      <div style="height: 20px"></div>
      <div class="editCar" v-if="edit" @click="editInfo">编辑</div>
      <div style="height: 20px"></div>
      <!-- <view class="btn" v-if="edit" @click="editInfo">编辑信息</view> -->
    </view>
    <!-- 编辑信息 -->
    <div v-if="!edit" style="height: 10px;"></div>
    <view v-if="!edit" style="color: #000000">
      <view style="width: 90%; margin-left: 5%">
        <div class="card">
          <div style="height: 10px;"></div>
          <div style="font-size: 18px;font-weight: bold;margin-left: 5%;">基础信息</div>
          <div style="height: 10px;"></div>
          <u-line></u-line>
          <div class="cards">
            <div style="height: 10px;"></div>
            <div>
              <div>单位名称</div>
              <div style="height: 15rpx;"></div>
              <div class="borders">
                <input placeholder="请输入" style="height: 42px;" v-model="obj.farmName" type="text" />
              </div>
            </div>
            <div style="height: 10px;"></div>
            <div>
              <div>联系人</div>
              <div style="height: 15rpx;"></div>
              <div class="borders">
                <input placeholder="请输入" style="height: 42px;" v-model="obj.contactName" type="text" />
              </div>
            </div>
            <div style="height: 10px;"></div>
            <div>
              <div>联系电话</div>
              <div style="height: 15rpx;"></div>
              <div class="borders">
                <input placeholder="请输入" style="height: 42px;" v-model="obj.contactPhone" type="text" />
              </div>
            </div>
          </div>
          <div style="height: 20px;"></div>
        </div>
        <view v-for="(item, indexs) in organicSourceVOList" style="margin-top: 10px;" :key="indexs">
          <div class="card">
            <div style="height: 10px;"></div>
            <div style="width: 90%;margin-left: 5%;display: flex;align-items: center;justify-content: space-between;">
              <div style="font-size: 18px;font-weight: bold;">产生源信息</div>
              <div @click="delCSY(indexs)">删除产生源</div>
            </div>
            <div style="height: 10px;"></div>
            <u-line></u-line>
            <div class="cards">
              <div style="height: 10px;"></div>
              <div>
                <div>产生源名称</div>
                <div style="height: 15rpx;"></div>
                <div class="borders">
                  <picker @change="(event) => pickerSoure(event, indexs)" :value="index" :range="sourceList">
                    <input style="height: 42px;" placeholder="请选择产生源" disabled v-model="item.source" type="text" />
                  </picker>
                </div>
              </div>
              <div style="height: 10px;"></div>
              <div>
                <div>产生源数量</div>
                <div style="height: 15rpx;"></div>
                <div class="borders">
                  <input style="height: 42px;" placeholder="请输入产生源数量" v-model="item.sourceQuantity" type="number" />
                </div>
              </div>
              <div style="height: 10px;"></div>
              <div>
                <div>产生源单位</div>
                <div style="height: 15rpx;"></div>
                <div class="borders">
                  <picker @change="(event) => pickerUnit(event, indexs)" :value="index" :range="unitList">
                    <input style="height: 42px;" disabled placeholder="选择单位" v-model="item.sourceUnit" type="text" />
                  </picker>
                </div>
              </div>
              <div style="height: 10px;"></div>
              <div>
                <div>更新周期（天）</div>
                <div style="height: 15rpx;"></div>
                <div class="borders">
                  <input placeholder="更新周期" v-model="item.updatePeriod" type="number" />
                </div>
              </div>
              <div style="height: 10px;"></div>
              <div>
                <div>更新间隔（天）</div>
                <div style="height: 15rpx;"></div>
                <div class="borders">
                  <input placeholder="周期间隔" v-model="item.periodInterval" type="number" />
                </div>
              </div>
              <div style="height: 10px;"></div>
              <div>
                <div>周期起始</div>
                <div style="height: 15rpx;"></div>
                <div class="borders">
                  <picker mode="date" :value="date" :start="startDate" :end="endDate"
                    @change="(event) => bindDateChange(event, indexs)">
                    <input placeholder="请选择周期起始" disabled v-model="item.periodBegin" type="text" />
                  </picker>
                </div>
              </div>
            </div>
            <div style="height: 20px;"></div>
            <div class="cards">
              <div style="font-size: 17px;font-weight: 600">有机质类型</div>
              <div style="height: 10px;"></div>
              <div>
                <view v-for="(items, indexsx) in item.organicList" :key="indexsx">
                  <div>
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                      <div>有机质名称</div>
                      <div @click="delyou(indexs, indexsx)">删除有机质</div>
                    </div>
                    <div style="height: 15rpx;"></div>
                    <div class="borders">
                      <picker @change="(event) => pickerMatter(event, indexs, indexsx)" :value="index"
                        :range="matterList">
                        <input style="height: 42px;" placeholder="选择有机质类型" v-model="items.organicType" type="text"
                          disabled />
                      </picker>
                    </div>
                  </div>
                  <div style="height: 10px;"></div>
                  <div>
                    <div>单位</div>
                    <div style="height: 15rpx;"></div>
                    <div class="borders">
                      <picker @change="(event) => pickerIngredients(event, indexs, indexsx)
                        " :value="index" :range="IngredientsList">
                        <input style="height: 42px;" disabled placeholder="选择" v-model="items.ts" type="text" />
                      </picker>
                    </div>
                  </div>
                  <div style="height: 10px;"></div>
                  <div>
                    <div>浓度</div>
                    <div style="height: 15rpx;"></div>
                    <div class="borders">
                      <input style="height: 42px;" v-model="items.organicConcentration" placeholder="请输入浓度"
                        type="text" />
                    </div>
                  </div>
                  <div style="height: 10px;"></div>
                </view>
              </div>
            </div>
            <div style="height: 10px;"></div>
            <div style="text-align: center;" @click="addyou(indexs)">新增有机质</div>
            <div style="height: 10px;"></div>
          </div>
        </view>
        <view style="height: 20rpx"></view>
        <div @click="addCsY" class="addCSY">新增产生源</div>
      </view>
      <view style="height: 20rpx"></view>
      <!-- <view v-for="(item, indexs) in organicSourceVOList" :key="indexs">
        <view style="width: 90%; margin-left: 5%">
          <view class="form-flex">
            <view style="width: 30%; color: #1a512c; font-weight: 500">
              产生源
            </view>
            <view class="borders">
              <view style="height: 5rpx"></view>
              <picker @change="(event) => pickerSoure(event, indexs)" :value="index" :range="sourceList">
                <input placeholder="请选择产生源" disabled v-model="item.source" type="text" />
              </picker>
              <view style="height: 5rpx"></view>
            </view>
          </view>
          <view style="height: 20rpx"></view>
          <view class="flexs">
            <view style="width: 30%">产生源数量</view>
            <view style="display: flex; align-items: center; width: 70%">
              <view class="borders-min" style="width: 60%">
                <view style="height: 5rpx"></view>
                <input placeholder="请输入产生源数量" v-model="item.sourceQuantity" type="number" />
                <view style="height: 5rpx"></view>
              </view>
              <view style="width: 5px"></view>
              <view class="borders-min" style="width: 40%">
                <view style="height: 5rpx"></view>
                <picker @change="(event) => pickerUnit(event, indexs)" :value="index" :range="unitList">
                  <input disabled placeholder="选择单位" v-model="item.sourceUnit" type="text" />
                </picker>
                <view style="height: 5rpx"></view>
              </view>
            </view>
          </view>
          <view style="height: 20rpx"></view>
          <view class="flexs">
            <view style="width: 30%">更新周期</view>
            <view style="display: flex; align-items: center; width: 70%">
              <view class="borders-min" style="width: 60%">
                <view style="height: 5rpx"></view>
                <input placeholder="更新周期" v-model="item.updatePeriod" type="number" />
                <view style="height: 5rpx"></view>
              </view>
              <view style="width: 5px"></view>
              <view class="borders-min" style="width: 40%">
                <view style="height: 5rpx"></view>
                <input v-model="day" disabled type="text" />
                <view style="height: 5rpx"></view>
              </view>
            </view>
          </view>
          <view style="height: 20rpx"></view>
          <view class="flexs">
            <view style="width: 30%">周期间隔</view>
            <view style="display: flex; align-items: center; width: 70%">
              <view class="borders-min" style="width: 60%">
                <view style="height: 5rpx"></view>
                <input placeholder="周期间隔" v-model="item.periodInterval" type="number" />
                <view style="height: 5rpx"></view>
              </view>
              <view style="width: 5px"></view>
              <view class="borders-min" style="width: 40%">
                <view style="height: 5rpx"></view>
                <input v-model="day" disabled type="text" />
                <view style="height: 5rpx"></view>
              </view>
            </view>
          </view>
          <view style="height: 20rpx"></view>
          <view class="form-flex">
            <view style="width: 30%; color: #1a512c; font-weight: 500">
              周期起始
            </view>
            <view class="borders">
              <view style="height: 5rpx"></view>
              <picker mode="date" :value="date" :start="startDate" :end="endDate"
                @change="(event) => bindDateChange(event, indexs)">
                <input placeholder="请选择周期起始" disabled v-model="item.periodBegin" type="text" />
              </picker>
              <view style="height: 5rpx"></view>
            </view>
          </view>
          <view style="height: 10px"></view>
          <view v-for="(items, indexsx) in item.organicList" :key="indexsx">
            <view class="flexs">
              <view style="width: 30%; color: #1a512c; font-weight: 500;">
                <div>有机质</div>
              </view>
              <view style="display: flex; align-items: center; width: 70%">
                <view class="borders-min" style="width: 60%">
                  <view style="height: 5rpx"></view>
                  <picker @change="(event) => pickerMatter(event, indexs, indexsx)" :value="index" :range="matterList">
                    <input placeholder="选择有机质类型" v-model="items.organicType" type="text" disabled />
                  </picker>
                  <view style="height: 5rpx"></view>
                </view>
                <view style="width: 5px"></view>
                <view class="borders-min" style="width: 40%">
                  <view style="height: 5rpx"></view>
                  <picker @change="(event) => pickerIngredients(event, indexs, indexsx)
                    " :value="index" :range="IngredientsList">
                    <input disabled placeholder="选择" v-model="items.ts" type="text" />
                  </picker>
                  <view style="height: 5rpx"></view>
                </view>
              </view>
            </view>
            <view style="height: 20rpx"></view>
            <view class="form-flex">
              <view style="width: 30%; color: #1a512c; font-weight: 500;">
                <div>浓度</div>
              </view>
              <view class="borders" style="width: 60%;">
                <view style="height: 5rpx"></view>
                <input v-model="items.organicConcentration" placeholder="请输入浓度" type="text" />
                <view style="height: 5rpx"></view>
              </view>
              <div style="width: 1%;"></div>
              <image @click="delyou(indexs, indexsx)" mode="widthFix"
                src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fdel.png"
                style="width: 50rpx;height: 50rpx;" />
            </view>
            <div style="height: 10px;"></div>
          </view>
          <div style="height: 10px;"></div>
        </view>
        <div @click="addyou(indexs)" style="display: flex;align-items: center;justify-content: center;">
          <image style="width: 50rpx;height: 50rpx;"
            src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fadd.png" mode="widthFix" />
          <div style="width: 1%;"></div>
          <div>新增有机质</div>
        </div>
        <div style="height: 20px;"></div>
        <div @click="delCSY(indexs)" style="display: flex;align-items: center;justify-content: center;">
          <image style="width: 50rpx;height: 50rpx;"
            src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fdel.png" mode="widthFix" />
          <div style="width: 1%;"></div>
          <div>删除产生源</div>
        </div>
        <view style="height: 20rpx"></view>
      </view> -->
      <view style="height: 20rpx"></view>
      <!-- <div @click="addCsY" style="display: flex;align-items: center;justify-content: center;">
        <image style="width: 50rpx;height: 50rpx;"
          src="https://28-1325662301.cos.ap-shanghai.myqcloud.com/static%2Fadd.png" mode="widthFix" />
        <div style="width: 1%;"></div>
        <div>新增产生源</div>
      </div> -->
      <view style="height: 30px"></view>
      <view class="btn" v-if="!edit" @click="saveInfo">保存信息</view>
      <div style="height: 3vh;"></div>
    </view>
  </view>
</template>
<script>
import { getInfo, constantList, detail, updateFarm } from "../api/api";
export default {
  data() {
    return {
      //产生源
      sourceList: [],
      sourceFind: [],
      // 单位
      unitList: [],
      unitFind: [],
      // 原料
      IngredientsList: [],
      IngredientsFind: [],
      // 有机质
      matterList: [],
      matterFind: [],
      day: "天",
      // true
      edit: true,
      obj: {},
      list: [],
      organicSourceVOList: [
        {
          sourceId: "",
          source: "",
          sourceQuantity: "",
          sourceUnitId: "",
          sourceUnit: "",
          periodBegin: "",
          updatePeriod: "",
          periodInterval: "",
          organicList: [
            {
              organicTypeId: "",
              organicType: "",
              organicConcentration: "",
              ts: "",
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 新增产生源
    addCsY() {
      this.organicSourceVOList.push({
        sourceId: "",
        source: "",
        sourceQuantity: "",
        sourceUnitId: "",
        sourceUnit: "",
        periodBegin: "",
        updatePeriod: "",
        periodInterval: "",
        organicList: [
          {
            organicTypeId: "",
            organicType: "",
            organicConcentration: "",
            ts: "",
          },
        ],
      });
    },
    delCSY(i) {
      if (this.organicSourceVOList.length > 1) {
        this.organicSourceVOList.splice(i, 1);
      } else {
        uni.showToast({
          title: '必须保留一个产生源',
          icon: 'none'
        })
      }
    },
    addyou(index) {
      console.log(index);
      this.organicSourceVOList[index].organicList.push({
        organicTypeId: "",
        organicType: "",
        organicConcentration: "",
        ts: "",
      });
    },
    delyou(index, indexs) {
      console.log(index, indexs);
      if (this.organicSourceVOList[index].organicList.length > 1) {
        this.organicSourceVOList[index].organicList.splice(indexs, 1)
      } else {
        uni.showToast({
          title: '必须保留一个有机质',
          icon: 'none'
        })
      }
    },
    // 新增有机质
    // 产生源
    pickerSoure(e, index) {
      console.log(e, index);
      const value = e.detail.value;
      this.organicSourceVOList[index].sourceId = this.sourceFind[value].id;
      this.organicSourceVOList[index].source =
        this.sourceFind[value].constantName;
    },
    // 数量单位
    pickerUnit(e, index) {
      const value = e.detail.value;
      this.organicSourceVOList[index].sourceUnitId = this.unitFind[value].id;
      this.organicSourceVOList[index].sourceUnit =
        this.unitFind[value].constantName;
    },
    //周期起始
    bindDateChange(e, index) {
      this.organicSourceVOList[index].periodBegin = e.detail.value;
    },
    // ts
    pickerIngredients(e, index, indexs) {
      const value = e.detail.value;
      this.organicSourceVOList[index].organicList[indexs].ts =
        this.IngredientsFind[value].constantName;
    },
    // 有机质类型
    pickerMatter(e, index, indexs) {
      const value = e.detail.value;
      this.organicSourceVOList[index].organicList[indexs].organicTypeId =
        this.matterFind[value].id;
      this.organicSourceVOList[index].organicList[indexs].organicType =
        this.matterFind[value].constantName;
    },
    editInfo() {
      this.edit = false;
    },
    saveInfo() {
      console.log(this.organicSourceVOList);
      console.log("this.obj-->", this.obj.contactName);
      let objList = ['farmName', 'contactName', 'contactPhone']
      for (let key in this.obj) {
        console.log(this.obj[key]);
        if (this.obj[key] === "" && objList.includes(key)) {
          uni.showToast({
            title: "请输入",
            icon: "none",
          });
          return;
        }
      }
      let orgSourceList = ['source', 'sourceQuantity', 'sourceUnit', 'updatePeriod', 'periodInterval']
      let orgList = ['organicType', 'ts', 'organicConcentration']
      this.organicSourceVOList.forEach(i => {
        for (let key in i) {
          if (orgSourceList.includes(key) && i[key] === '') {
            uni.showToast({
              title: "请输入",
              icon: "none",
            });
            return;
          }
          if (key === 'organicList') {
            i[key].forEach(item => {
              for (let keys in item) {
                if (orgList.includes(keys) && item[keys] === '') {
                  uni.showToast({
                    title: "请输入",
                    icon: "none",
                  });
                  return;
                }
              }
            })
          }
        }
      })
      //   return;
      updateFarm({
        farm: this.obj,
        organicSourceVOList: this.organicSourceVOList,
      }).then((res) => {
        console.log(res.data, "addFarm");
        if (res.data.code == 200) {
          uni.showToast({
            title: res.data.msg,
            icon: "success",
            mask: true,
          });
          this.info();
          this.edit = true;
          this.obj = {};
          this.organicSourceVOList = [];
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: "none",
            mask: true,
          });
        }
      });
    },
    info() {
      getInfo().then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.obj = res.data.data.farm;
          this.list = res.data.data.organicSourceVOList;
          this.organicSourceVOList = res.data.data.organicSourceVOList;
        }
      });
    },
  },
  onShow() {
    this.info();
    //
    constantList().then((res) => {
      console.log(res.data, "res.data");
      const { data } = res.data;
      let sourceId = data.find((item) => item.constantName == "产生源").id;
      let numId = data.find((item) => item.constantName == "数量单位").id;
      let ylId = data.find((item) => item.constantName == "重量单位").id;
      let matterId = data.find((item) => item.constantName == "有机质类型").id;
      // 产生源
      detail({ id: sourceId }).then((res) => {
        console.log(res.data, "产生源");
        this.sourceList = res.data.data.map((item) => item.constantName);
        this.sourceFind = res.data.data;
      });
      // 数量单位
      detail({ id: numId }).then((res) => {
        console.log(res.data, "数量");
        this.unitList = res.data.data.map((item) => item.constantName);
        this.unitFind = res.data.data;
      });
      // 原料
      detail({ id: ylId }).then((res) => {
        console.log(res.data, "原料");
        this.IngredientsList = res.data.data.map((item) => item.constantName);
        this.IngredientsFind = res.data.data;
      });
      // 有机质
      detail({ id: matterId }).then((res) => {
        console.log(res.data, "原料");
        this.matterList = res.data.data.map((item) => item.constantName);
        this.matterFind = res.data.data;
      });
    });
  },
};
</script>
<style lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  overflow-y: scroll;
}

.content {
  width: 90%;
  margin-left: 5%;
}

.card {
  padding: 10;
  background: #ffffff;
  border-radius: 7px;
}

.cards {
  width: 90%;
  margin-left: 5%;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn {
  background: #000000;
  color: #fff;
  width: 90%;
  margin-left: 5%;
  height: 45px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-flex {
  display: flex;
  align-items: center;
  width: 100%;
}

.borders {
  border: 1px solid #000000;
  border-radius: 5px;
  text-align: center;
}

.borders-min {
  border: 1px solid #1a512c;
  border-radius: 5px;
  text-align: center;
}

.flexs {
  display: flex;
  align-items: center;
}

input {
  height: 42px;
}

.editCar {
  height: 45px;
  color: #fff;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.addCSY {
  background: #000000;
  color: #fff;
  border-radius: 6px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  margin-left: 5%;
}
</style>
